import useGetPageInfo from "@/hooks/useGetPageInfo";
import {
  ArrowLeftOutlined,
  CopyOutlined,
  QrcodeOutlined,
} from "@ant-design/icons";
import {
  Button,
  Input,
  message,
  Popover,
  Space,
  Tooltip,
  Typography,
} from "antd";
import type { InputRef } from "antd";
import { FC, useRef } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { QRCodeSVG } from "qrcode.react";
const { Title } = Typography;

const StatHeader: FC = () => {
  const { title } = useGetPageInfo();
  const nav = useNavigate();
  const { id } = useParams();

  const InputRef = useRef<InputRef>(null);
  function getShareLinkElement() {
    const url = `http://localhost:5173/question/stat/${id}`;

    function copy() {
      const elem = InputRef.current;
      if (elem) {
        elem.select();
        document.execCommand("copy");
        message.success("拷贝成功");
      }
    }
    return (
      <Space>
        <Input
          placeholder="请输入关键字"
          value={url}
          ref={InputRef}
          className="!w-80"
        />
        <Tooltip title="拷贝">
          <Button type="text" icon={<CopyOutlined />} onClick={copy}></Button>
        </Tooltip>
        <Popover
          placement="bottom"
          content={<QRCodeSVG value={url} size={150} />}
        >
          <Button type="text" icon={<QrcodeOutlined />}></Button>
        </Popover>
      </Space>
    );
  }

  return (
    <div className="w-full py-3 bg-white border-b border-gray-200">
      <div className="flex mx-6">
        <div className="w-1/4">
          <Space align="center">
            <Button
              type="link"
              icon={<ArrowLeftOutlined />}
              onClick={() => nav(-1)}
            ></Button>
            <Title level={5} copyable className="!mb-0 ">
              {title}
            </Title>
          </Space>
        </div>
        <div className="flex-1 text-center ">{getShareLinkElement()}</div>
        <div className="w-1/4 text-right">
          <Button type="primary" onClick={() => nav(`/question/edit/${id}`)}>
            编辑问卷
          </Button>
        </div>
      </div>
    </div>
  );
};

export default StatHeader;
